<template>
	<div class="app-container">
		<el-row :gutter="20">
			<el-col :span="24" :xs="24">
				<el-row :gutter="20">
					<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
						label-width="68px">
						<el-col>
							<el-form-item label="设备类型" prop="device">
								<el-select v-model="queryParams.type" placeholder="请选择设备类型" clearable
									style="width: 240px">
									<el-option v-for="item in types" :key="item.value" :label="item.label"
										:value="item.value" />
								</el-select>
							</el-form-item>
						</el-col>

						<el-col>
							<el-form-item label="SN码" prop="sn">
								<el-select v-model="queryParams.sn" placeholder="请选择设备SN码" clearable
									style="width: 240px">
									<el-option v-for="item in sns" :key="item.value" :label="item.label"
										:value="item.value" />
								</el-select>
							</el-form-item>
						</el-col>

						<el-col>
							<el-form-item label="任务周期" prop="sn">
								<el-select v-model="queryParams.jobCycle" placeholder="请选择任务周期" clearable
									style="width: 240px">
									<el-option v-for="item in jobCycles" :key="item.value" :label="item.label"
										:value="item.value" />
								</el-select>
							</el-form-item>
						</el-col>

						<el-col>
							<el-form-item label="时间点">
								<el-date-picker v-model="queryParams.timePoint" type="datetime" style="width: 240px" />
							</el-form-item>
						</el-col>

						<el-col>
							<el-form-item label="时间段">
								<el-date-picker v-model="queryParams.timePeriod" style="width: 240px"
									value-format="yyyy-MM-dd" type="datetimerange" range-separator="-"
									start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
							</el-form-item>
						</el-col>

						<el-col>
							<el-form-item label="循环日期">
								<el-select v-model="queryParams.cycleDate" multiple placeholder="请选择循环日期" clearable
									style="width: 240px">
									<el-option v-for="item in cycleDates" :key="item.value" :label="item.label"
										:value="item.value" />
								</el-select>
							</el-form-item>
						</el-col>

						<el-col>
							<el-form-item label="任务类型">
								<el-select v-model="queryParams.jobType" placeholder="请选择设备SN码" clearable
									style="width: 240px">
									<el-option v-for="item in jobTypes" :key="item.value" :label="item.label"
										:value="item.value" />
								</el-select>
							</el-form-item>
						</el-col>

						<el-col>
							<el-form-item>
								<el-button type="primary" icon="el-icon-add" size="mini"
									@click="handleQuery">新增</el-button>
								<!-- <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button> -->
							</el-form-item>
						</el-col>
					</el-form>
				</el-row>

			</el-col>
		</el-row>
	</div>
</template>

<script>
	import {
		getToken
	} from "@/utils/auth";

	const cycleDates = []

	for (var i = 1; i <= 31; i++) {
		let item = {
			label: i + "",
			value: i + "",
		}
		cycleDates.push(item)
	}

	export default {
		name: "User",
		data() {
			return {
				showSearch: true,
				// 查询参数
				queryParams: {
					type: "charger",
					sn: "",
					jobCycle: "",
					timePoint: "",
					timePeriod: "",
					cycleDate: "",
					jobType: "",
				},
				types: [{
						label: '充电桩',
						value: 'charger',
					},
					{
						label: 'UPS',
						value: 'ups',
					},
					{
						label: '逆变器',
						value: 'inverter',
					},
				],
				sns: [],
				jobCycles: [{
						label: '单次',
						value: 'once',
					},
					{
						label: '每天',
						value: 'daily',
					},
					{
						label: '每周',
						value: 'weekly',
					},
					{
						label: '每月',
						value: 'monthly',
					},
				],
				jobTypes: [{
						label: '充电',
						value: 'charging',
					},
					{
						label: '开机',
						value: 'turnOn',
					},
					{
						label: '关机',
						value: 'turnOff',
					},
					{
						label: '网络唤醒',
						value: 'networkAwake',
					},
					{
						label: '邮件提醒',
						value: 'emailNotice',
					},
				],
				cycleDates: cycleDates,
				// 表单校验
				rules: {
					userName: [{
							required: true,
							message: "用户名称不能为空",
							trigger: "blur"
						},
						{
							min: 2,
							max: 20,
							message: '用户名称长度必须介于 2 和 20 之间',
							trigger: 'blur'
						}
					],
				},
			};
		},
		watch: {

		},
		created() {
			// this.getList();
			// this.getDeptTree();
			// this.getConfigKey("sys.user.initPassword").then(response => {
			// 	this.initPassword = response.msg;
			// });
		},
		methods: {
			/** 查询用户列表 */
			getList() {
				// this.loading = true;
				// listUser(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
				// 	this.userList = response.rows;
				// 	this.total = response.total;
				// 	this.loading = false;
				// });
			},
			/** 搜索按钮操作 */
			handleQuery() {
				this.queryParams.pageNum = 1;
				this.getList();
			},
			// 多选框选中数据
			handleSelectionChange(selection) {
				this.ids = selection.map(item => item.userId);
				this.single = selection.length != 1;
				this.multiple = !selection.length;
			},
			/** 修改操作 */
			handleEdit(row) {
				console.log("row=" + row);
				row.isProressShow = true;
			},
			/** 新增操作 */
			handleAdd() {

			},
			handleUpdateBatch() {
				console.log("row=" + row);
				row.isProressShow = true;
			},
		}
	};
</script>